<template>
  <div class="memberCenter">
    <div class="tit">
      会员中心
      <span>会員センター</span>
    </div>
    <div class="content">
      <div class="top">
        <img src="../assets/images/icon3.png" alt="">
        <span>贝拍会员</span>  
      </div>
      <div style="overflow:hidden; margin:30px 0;">
        <span class="tag">普通会员</span>
        <span class="right">贝拍单会员 享专属权益</span>
      </div>
    </div>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">普通会员</mt-tab-item>
      <mt-tab-item id="2">黄金会员</mt-tab-item>
      <mt-tab-item id="3">白金会员</mt-tab-item>
      <mt-tab-item id="4">钻石会员</mt-tab-item>
    </mt-navbar>
    
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <span class="memTit">普通会员特权</span>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media listTit">
            <a href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="../assets/images/icon4.png">
              <div class="mui-media-body">
                幸福
              </div>
              <p>每日优惠享受贝拍每日超值优惠产品折扣</p>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media listTit">
            <a href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="../assets/images/icon4.png">
              <div class="mui-media-body">
                消费送券
              </div>
              <p>每次购物付款，每满100元返5元优惠券，满返立即到账，24小时后可激活使用</p>
            </a>
          </li>
        </ul>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <span class="memTit">黄金会员特权</span>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media listTit">
            <a href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="../assets/images/icon4.png">
              <div class="mui-media-body">
                幸福
              </div>
              <p>每日优惠享受贝拍每日超值优惠产品折扣</p>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media listTit">
            <a href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="../assets/images/icon4.png">
              <div class="mui-media-body">
                消费送券
              </div>
              <p>每次购物付款，每满100元返5元优惠券，满返立即到账，24小时后可激活使用</p>
            </a>
          </li>
        </ul>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <span class="memTit">白金会员特权</span>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media listTit">
            <a href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="../assets/images/icon4.png">
              <div class="mui-media-body">
                幸福
              </div>
              <p>每日优惠享受贝拍每日超值优惠产品折扣</p>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media listTit">
            <a href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="../assets/images/icon4.png">
              <div class="mui-media-body">
                消费送券
              </div>
              <p>每次购物付款，每满100元返5元优惠券，满返立即到账，24小时后可激活使用</p>
            </a>
          </li>
        </ul>
      </mt-tab-container-item>
      <mt-tab-container-item id="4">
        <span class="memTit">钻石会员特权</span>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media listTit">
            <a href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="../assets/images/icon4.png">
              <div class="mui-media-body">
                幸福
              </div>
              <p>每日优惠享受贝拍每日超值优惠产品折扣</p>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media listTit">
            <a href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="../assets/images/icon4.png">
              <div class="mui-media-body">
                消费送券
              </div>
              <p>每次购物付款，每满100元返5元优惠券，满返立即到账，24小时后可激活使用</p>
            </a>
          </li>
        </ul>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
export default {

  data () {
    return {
      selected:"1"
    }
  },

  methods: {},

  created () {
  }
}
</script>

<style lang='less' scoped>
.content{
  width:100%;
  padding: 20px;
  border-radius:10px;
  background: #003A9B;
  margin-top: 10px;
  .top{
    overflow: hidden;
    img{
      width:22px;
      height:17px;
      display: block;
      float: left;
    }
    span{
      font-size: 12px;
      color: #FDDF00;
      float: left;
      display: block;
      margin-top: -2px;
      margin-left: 4px;
    }
  }
  .tag{
    background: #FDDF00;
    border-radius: 6px;
    width:93px;
    height:33px;
    display: block;
    text-align: center;
    line-height: 33px;
    float: left;
  }
  .right{
    float:right; 
    font-size:12px;
    line-height: 33px;
    color: #FDDF00;
  }
  
}
.memTit{
    margin-top: 24px;
    font-size: 14px;
    color: #333333;
    padding-bottom:13px;
    display: block;
    border-bottom: 1px solid #E7E7E7;
  }
.listTit .mui-media-body{
  font-size: 12px;
  color: #333333;
  line-height: 14px;
  
}
.listTit img{
  margin-top: 2px;
  margin-right: 4px !important;
}
.listTit p{
  font-size: 12px;
  color: #666666;
  margin-top:5px;
}
.mui-table-view-cell:after{
  left:0;
  background: #F7F7F7;
}
.mui-table-view:before,.mui-table-view:after{
  background: #F7F7F7;
}
.mui-table-view-cell{
  padding: 21px 10px;
}
.mint-navbar{
  justify-content:space-between;
  margin: 20px 0;
}
.mint-navbar .mint-tab-item{
  width:22%;
  background: #FFFFFF;
  border: 1px solid #E7E7E7;
  border-radius: 8px;
  box-shadow: none;
  flex: none;
  width:22%;
  color: #3B3B3B;
}
.mint-navbar .mint-tab-item.is-selected{
  background: #FDDF00 ;
  border-bottom: none;
  color: #3B3B3B;
}
.mui-table-view .mui-media-object{
  width:9px;
  height:9px;
  font-size: 12px;
color: #333333;
}
</style>
